<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-Popup</title>
        <script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
        <style type="text/css">
            #app {
                height: 100vh;
                width: 100vw;
            }
            #toolbar-wrapper {
                position: absolute;
                z-index: 9999;
                display: inline-flex;
                overflow-x: hidden;
                overflow-y: visible;
                top: 20px;
                left: 20px;
            }
            .toolbar-item {
                background: #ffffff;
                border: 1px dashed #666666;
                text-align: center;
                font-size: 20px;
                line-height: 20px;
                height: fit-content;
                padding: 6px 16px;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-scene
                v-on:load="handleLoad"
                lib-path="./static/libs/cdn/cesium/Cesium.js"
                plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
            >
                <mapgis-3d-draw ref="drawref" v-on:load="handleDrawLoad" v-on:drawcreate="handleCreate">
                    <div id="toolbar-wrapper">
                        <div class="toolbar-item" v-on:click="togglePoint">画点</div>
                        <div class="toolbar-item" v-on:click="togglePolyline">画线</div>
                        <div class="toolbar-item" v-on:click="togglePolygon">画区</div>
                        <div class="toolbar-item" v-on:click="toggleRectangle">画矩形</div>
                        <div class="toolbar-item" v-on:click="toggleDelete">删除</div>
                    </div>
                </mapgis-3d-draw>
                <mapgis-3d-raster-layer :base-url="baseUrl"></mapgis-3d-raster-layer>
            </mapgis-web-scene>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        vueKey: 'draw',
                        baseUrl: 'http://t6.tianditu.com/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=img&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles&tk=f5347cab4b28410a6e8ba5143e3d5a35',
                    };
                },
                mounted() {
                    console.log('mounted');
                },
                methods: {
                    handleLoad(e) {
                        console.log('地图加初始化完毕！', e);
                    },
                    handleDrawLoad(drawer) {
                        this.drawer = drawer;
                    },
                    handleCreate(cartesian3, lnglat) {
                        console.log('create', cartesian3, lnglat);
                    },
                    togglePoint(e) {
                        this.drawer && this.drawer.enableDrawPoint();
                    },
                    togglePolyline() {
                        this.drawer && this.drawer.enableDrawLine();
                    },
                    togglePolygon() {
                        this.drawer && this.drawer.enableDrawPolygon();
                    },
                    toggleRectangle() {
                        this.drawer && this.drawer.enableDrawRectangle();
                    },
                    toggleDelete() {
                        this.drawer && this.drawer.removeEntities();
                    }
                }
            });
        </script>
    </body>
</html>
